<template>
  <div class="title20">未使用Teleport组件</div>
  <div class="con20">
    <span class="c_span">父元素FIR</span>
    <div class="c_">
      <span class="c_span2">父元素SEC</span>
      <child20></child20>
    </div>
  </div>

  <div class="title20">使用Teleport组件（存在dom节点先后渲染问题，建议挂在到body或者#app上实现全局转移）</div>
  <div class="con20 cc">
    <span class="c_span3">父元素FIR</span>
    <div class="c_2">
      <span class="c_span4">父元素SEC</span>
    </div>
  </div>
  <Teleport to=".cc">
    <child20></child20>
  </Teleport>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import child20 from "./demo20_child.vue";
</script>

<style scoped lang="scss">
.title20 {
  font-size: 24px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}
.cc{
    cursor: default;
}
.con20 {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #93b5cf;
  z-index: 1;
  margin-bottom: 40px;
  .c_span {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  .c_ {
    position: relative;
    width: 100%;
    height: 100px;
    z-index: 2;
    background-color: #baccd9;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    .c_span2 {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      padding: 20px;
    }
  }
  .c_span3 {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  .c_2 {
    position: relative;
    width: 100%;
    height: 100px;
    z-index: 2;
    background-color: #baccd9;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    .c_span4 {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      padding: 20px;
    }
  }
}
</style>
